<template>
	<!-- #ifdef APP-NVUE -->
	<view class="e-safe-bottom" :style="[style]"> </view>
	<!-- #endif -->
	<!-- #ifndef APP-NVUE -->
	<view class="e-safe-bottom e-safe-area-inset-bottom" :style="[style]"> </view>
	<!-- #endif -->
</template>
<script lang="ts">
	import { defineComponent } from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * SafeBottom 底部安全区
	 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
	 * @tutorial https://www.uviewui.com/components/safeAreaInset.html
	 * @property {Object}	customStyle	定义需要用到的外部样式
	 *
	 * @example <e-status-bottom></e-status-bottom>
	 */
	export default defineComponent({
		name: "e-safe-bottom",
		mixins: [mpMixin],
	});
</script>
<script lang="ts" setup>
	import { computed } from "vue";
	import { safeBottomProps } from "./props";
	import { deepMerge, sys } from "../../libs/utils";
	import { addStyle, addUnit } from "../../libs/utils/_utils";
	import type { StyleProperties } from "../../libs/tokens";

	const props = defineProps(safeBottomProps);

	const style = computed(() => {
		const style : StyleProperties = {};
		// #ifdef APP-NVUE
		// nvue下，高度使用js计算填充
		style.height = addUnit(sys().safeAreaInsets?.bottom || 0, "px");
		// #endif
		return deepMerge(style, addStyle(props.customStyle!));
	});
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/safe-bottom.scss";
</style>